import React from "react";
import styles from "./index.module.less";
import head20 from "@images/head/20.gif";
import head21 from "@images/head/21.jpeg";
// import testImg1 from '@images/sex1.webp'
import moment from "moment";

/**
 * 聊天内容展示在左侧时的样式，
 * 即发送人内容展示
 */
const ItemLeft = (props) => {
    const { item } = props;

    return (
        <div className={styles.item_from}>
            <div className={styles.avatar}>
                <img src={head20} alt="" />
            </div>
            <div className={styles.from_main}>
                <span className={styles.from_content}>{item.content}</span>
                {item.isShowLastDate && (
                    <p className={styles.show_last_date}>
                        {moment(item.createMsgDate).format(
                            "YYYY-MM-DD HH:mm:ss"
                        )}
                    </p>
                )}
            </div>
        </div>
    );
};

/**
 * 聊天内容展示在右侧时的样式，
 * 即接收人内容展示
 */
const ItemRig = (props) => {
    const { item } = props;

    return (
        <div className={styles.item_to}>
            <div className={styles.to_main}>
                <span className={styles.to_content}>{item.content}</span>
                {item.isShowLastDate && (
                    <p className={styles.show_last_date}>
                        {moment(item.createMsgDate).format(
                            "YYYY-MM-DD HH:mm:ss"
                        )}
                    </p>
                )}
            </div>
            <div className={styles.avatar}>
                <img src={head21} alt="" />
            </div>
        </div>
    );
};

const ChatContainer = (props) => {
    const { contentList, loginUser } = props;

    return (
        <div className={styles.chat_container}>
            {contentList &&
                contentList.length > 0 &&
                contentList.map((item, index) => {
                    return item.from === loginUser ? (
                        <ItemRig key={index} item={item} />
                    ) : (
                        <ItemLeft key={index} item={item} />
                    );
                })}
        </div>
    );
};

export default ChatContainer;
